import React from "react";
import {connect} from "react-redux";
import ProductList from "./ProductList";
import {history} from "../../App";

// @connect
const Product = ({products, dispatch}) => {
    /**
     * 删除按钮操作
     * @param id
     */
    function onDel(id) {
        dispatch({
            type: "products/del",
            payload: id,
        });
    }

    function onAdd() {
        dispatch({
            type: "products/add"
        });
    }

    function toEdit(id) {
        history.push(`/product/edit/${id}`);
    }

    function toDetail(id) {
        history.push(`/product/detail/${id}`);
    }

    return (
        <div>
            <h2>列表</h2>
            <button onClick={onAdd}>添加</button>
            <ProductList onDel={onDel} toEdit={toEdit} toDetail={toDetail} productList={products}/>
        </div>
    );
}

const productsState = ({products}) => ({...products});

export default connect(productsState)(Product);